<template>
  <div id="app">
       <transition :name="transitionName">
      <router-view class="views" />      
    </transition>
  </div>
</template>
<script>

export default {
  name: 'App',
  data() {
    return {}
  },
  computed: {
    transitionName () {
      return this.$store.state.transitionName
    }
  }
}
</script>
<style lang='less' scoped>
#app {
  height: 100%;
 
}
.views {
  position: absolute;
  width: 100%;
  transition: all .8s ease;
  top: 0;
 }
.slide-left-enter-active {
  transition: all .3s ease;
}
.slide-left-leave-active {
  transition: all .4s ease;
}
.slide-left-enter {
  transform: translateX(100%);
  opacity: 0;
}
.slide-left-leave-to {
 transform: translateX(-100%);
  opacity: 0;
}

.slide-right-enter-active {
  transition: all .3s ease;
}
.slide-right-leave-active {
  transition: all .4s ease;
}
.slide-right-enter {
  transform: translateX(-100%);
  opacity: 0;
}
.slide-right-leave-to {
    transform: translateX(100%);
    opacity: 0;
}
</style>
